<template>

  <div class="home" >
    <hello style="margin:20px 0;" ></hello>
    <el-row
            :gutter="20"
            class="con2"
    >
      <el-col :md="24" :lg="12">
        <el-card
                class="box-card"
                shadow="hover"
        >
          <div
                  slot="header"
                  class="clearfix bim-header"
                  shadow="hover"
          >
            <span>新闻动态</span>
            <el-button
                    style="float: right; padding: 3px 0"
                    type="text" @click="goPath('/demo-news')" v-if="show"
            >更多>></el-button>
          </div>
          <div class="item news">
            <div
                    class="newsCon"
                    v-for="(item,index) in news"
                    :key='index'
                    @click="goNews(item.id,1)"
            >
              <div>{{item.title}} </div>
              <div>{{item.pubDate | fomatedate}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="24" :lg="12">
        <el-card
                class="box-card"
                shadow="hover"
        >
          <div
                  slot="header"
                  class="clearfix bim-header"
                  shadow="hover"
          >
            <span>通知公告</span>
            <el-button
                    style="float: right; padding: 3px 0"
                    type="text" @click="goPath('/demo-news')" v-if="show"
            >更多>></el-button>
          </div>
          <div class="item news">
            <div
                    class="newsCon"
                    v-for="(item,index) in Notice"
                    :key='index'
                    @click="goNews(item.id,2)"
            >
              <div>{{item.title}} </div>
              <div>{{item.pubDate | fomatedate}}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import hello from '@/views/modules/hello' // 欢迎模块
export default {
  components: { hello },
  mixins: [mixinViewModule],
  data () {
    return {
      // 获取新闻公告信息  传入参数  类型 1公告 2新闻 和条数限制
      getNewsLimitURL: '/demo/news/dashboard',
      progressList: [],
      news: [], // 新闻列表
      Notice: [], // 通知列表
      WarningList: [], // 预警列表
      WarningDia: false,
      WarningLoadng: false,
      WarningData: {},
      show: true
    }
  },
  created () {
    this.getHomeJurisdiction()
    this.getNews()
    this.getNotice()
  },
  mounted () {
    //
  },
  activated () {

  },
  filters: {
    fomatedate (val) {
      //
      return val.substring(0, 10)
    }
  },
  methods: {
    handleClose (done) {
      done()
    },
    // eslint-disable-next-line camelcase
    IsURL (str_url) {
      // eslint-disable-next-line no-useless-escape
      var re = /(http:\/\/https:\/\/)?([A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)/g
      let str = str_url.match(re)[0]
      return `http://${str}`
    },
    goNews (id, type) {
      //
      if (type === 1) {
        this.$http.get(`/demo/news/${id}`).then(({ data: res }) => {
          if (res.code !== 0) {
            return false
          }
          //
          this.data = res.data
          var str = res.data.content
          window.open(this.IsURL(str), '_blank')
        })
        return
      }

      let routeData = this.$router.resolve({
        name: 'news',
        params: { 'id': id }
      })
      window.open(routeData.href, '_blank')
    },
    // 获取首页权限
    getHomeJurisdiction () {
      this.$http.get('/sys/role/homeControl', {
        params: {
          homeControl: '1',
          userId: this.$store.state.user.id
        }
      }).then(({ data: res }) => {
        //
        if (res.code !== 0) {
          return false
        }
        if (res.data === true) {
          this.show = true
        } else {
          this.show = false
        }
      })
    },
    getProgressList () {
      this.$http.get(this.getProgressListURL).then(({ data: res }) => {
        //
        if (res.code !== 0) {
          return false
        }
        this.progressList = res.data
      })
    },
    // 获取新闻
    getNews () {
      let params = {
        newType: 3,
        limit: 6
      }
      // ?newType=${1}&limit=${6}
      this.$http.get(`${this.getNewsLimitURL}`, {
        params: params
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.news = res.data
      })
    },
    // 获取公告
    getNotice () {
      let params = {
        newType: 2,
        limit: 6
      }
      // ?newType=${1}&limit=${6}
      this.$http.get(`${this.getNewsLimitURL}`, {
        params: params
      }).then(({ data: res }) => {
        //
        if (res.code !== 0) {
          return false
        }
        this.Notice = res.data
      })
    },
    // 获取预警信息
    Warning () {
      this.$http.get(`${this.getBimWarningLimitURL}/${6}`).then(({ data: res }) => {
        if (res.code !== 0) {
          return false
        }
        this.WarningList = res.data
      })
    },
    goPath (path) {
      //
      this.$router.push({
        path: path
      })
    }
  }
}
</script>
<style lang="scss">
  .el-row {
    // margin-bottom: 20px;
  }
  .con {
    .el-col {
      height: 100%;
      // background: white;
      .el-card {
        height: 100%;
        .item {
          height: 100%;
          overflow: hidden;
          .el-col {
            height: 280px;
          }
        }
        .el-card__body {
          height: 300px !important;
        }
        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .con2 {
    .el-col {
      height: 325px;
      // background: white;
      .el-card {
        height: 100%;
      }
    }
  }
  .head {
    .el-col {
      height: 100px;
      // background: white;
      .el-card {
        height: 100%;
        .el-card__body {
          padding: 20px;
          width: 100%;
          display: flex;
          cursor: pointer;
          .item {
            line-height: 58px;
            text-indent: 20px;
            font-size: 16px;
          }
        }
      }
      .box-card {
        display: flex;
      }
    }
  }
  .bim-header {
    position: relative;
    .year {
      width: 80px;
      position: absolute;
      right: 70px;
      top: -3px;
    }
  }
  .news {
    .newsCon {
      overflow: hidden;
      padding: 10px 0;
      border-bottom: 1px solid #ebeef5;
      cursor: pointer;
      div:first-child {
        float: left;
      }
      div:last-child {
        float: right;
      }
    }
    .newsCon:first-child {
      padding-top: 0;
    }
    .newsCon:last-child {
      border-bottom: none;
    }
  }

  .inner {
    max-width: 677px;
    margin-left: auto;
    margin-right: auto;
  }
  .inner .title {
    font-size: 22px;
    line-height: 1.4;
    margin-bottom: 14px;
  }
  .inner .desc .user {
    color: #576b95;
    text-decoration: none;
    margin-right: 10px;
  }
  .inner .desc .data {
    color: rgba(0, 0, 0, 0.3);
  }
  .inner .desc .pageView {
    color: #f00;
    float: right;
  }
  .inner .content {
    padding-top: 20px;
  }
</style>
